<!-- Dom模板 -->
<template>
  <!-- Dom内容 -->
  <div class="top">
    <h3>后台管理系统</h3>
    <div class="con">
      <p>首页</p>
      <p>></p>
      <p>系统管理</p>
      <p>></p>
      <p>{{ title[$route.meta.Index] }}</p>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  data() {
    return {
      msg: "测试",
      title: ["管理员管理", "角色管理", "用户管理", "banner管理"],
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    console.log(this.$store.state);
  },
  // Vue方法定义
  methods: {
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.top {
  height: 50px;
  display: flex;
  background-color: #4a5259;
  color: white;
  align-items: center;
}
h3 {
  margin: 0 60px;
}
.con {
  display: flex;
  align-items: center;
}
.con p {
  margin-right: 10px;
}
</style>